<template>
	<view class="app-container">
		<view class="role-list">
			<view class="panel-title">
				选择角色
			</view>
			<!-- 单选组 -->
			<radio-group @change="onRoleChange">
				<label class="role-list__item" v-for="role in roles.slice(0, 5)" :key="role.value"
					:class="{ 'role-list__item--active': currentRole === role.value }">
					<!-- 左侧：仅图标（独立区域，固定宽度） -->
					<view class="role-list__icon-wrap">
						<text
							:class="['icon-item iconfont', role.icon, currentRole === role.value ? 'iconActiveColor' : '']"></text>
					</view>

					<!-- 右侧：文字 + radio（带下边框，占满剩余宽度） -->
					<view class="role-list__right-content">
						<!-- 文字区域 -->
						<text class="role-list__text"
							:class="{ 'role-list__text--active': currentRole === role.value }">
							{{ role.name }}
						</text>
						<!-- Radio 区域 -->
						<radio :class="{ 'radio--active': currentRole === role.value }" :value="role.value"
							:checked="currentRole === role.value" />
					</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>
<script setup>
// 1. 导入所需API和工具
import {
	ref,
	reactive,
	nextTick,
	onMounted
} from 'vue'
import {
	useRouter
} from 'uni-mini-router'
import {
	ROLE_TABS
} from "@/config/roles"
import {
	useTabStore
} from '@/stores/tabs'
import {
	getRoleList
} from '@/utils/extractRoleListWithValue';
const tabStore = useTabStore()
import { getAppEnum } from "@/utils/appDataEnum"

// 2. 初始化路由实例（直接在setup顶层声明，无需返回）
const router = useRouter()

const currentRole = ref('')

// 角色列表：确保每个角色都有对应配置（原代码中"doctor"未在列表中，故调整默认值）
const roles = ref([])

// 4. 生命周期钩子（直接使用，无需包裹）
onMounted(() => {
	roles.value = getRoleList();
	currentRole.value = getApp()[getAppEnum.CurrentRole]
})

// 5. 事件处理函数（直接声明，无需返回）
const onRoleChange = (e) => {
	const selectedValue = e.detail.value;
	currentRole.value = selectedValue;
	getApp()[getAppEnum.CurrentRole] = selectedValue;

	const firstTabKey = ROLE_TABS[selectedValue]?.tabs?.[0]?.key
	if (firstTabKey) {
		router.pushTab({
			name: firstTabKey
		})
	} else {
		// 兜底跳转
		router.pushTab({
			name: 'doctor_home'
		})
	}
}
</script>

<style lang="less" scoped>
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';

.app-container {
	padding: 20rpx;
	background-color: @color-bg-page;
	min-height: 100vh;
}

.role-list {
	background: #fff;
	padding: 30rpx;
	border-radius: 30rpx;

	&__title {
		font-size: @h4-size;
		font-weight: 500;
		color: #333;
		margin: 30rpx 0;
		text-align: center;
	}

	// 列表项：左右布局 + 交互样式
	&__item {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		transition: all 0.2s ease;

		&:active {
			background-color: #f0f0f0;
		}

		&--active {
			// 选中状态的额外样式（若需扩展）
		}
	}

	// 左侧图标容器：固定宽度 + 居中
	&__icon-wrap {
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 右侧：文字+radio 容器（带下边框 + 两端对齐）
	&__right-content {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 20rpx;
		border-bottom: 1px solid @color-border;
		margin-left: 20rpx;
	}

	// 角色文字样式
	&__text {
		font-size: @h3-size;
		color: #333;
		transition: color 0.2s ease;

		&--active {
			color: #007AFF;
		}
	}

	// 图标基础样式
	.icon-item {
		font-size: @icon-size-lg;
		color: #333;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ebebeb;
		border-radius: 50%;
	}

	// 图标选中样式
	.iconActiveColor {
		background: #007AFF;
		color: #ffffff;
	}

	// Radio选中样式
	radio .wx-radio-input.wx-radio-input-checked {
		background-color: #007AFF !important;
		border-color: #007AFF !important;
		color: #ffffff !important;
	}

	// Radio大小优化
	radio {
		transform: scale(0.9);
	}

	// 面板标题样式
	.panel-title {
		font-size: @h3-size;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
	}
}
</style>